<template>
  <div class="health-analysis-container">
    <!-- 页面标题：隐藏默认返回箭头 -->
    <el-page-header style="margin-bottom: 30px;">
      <template v-slot:content>
        设备健康度分析
      </template>
    </el-page-header>

    <!-- 健康等级分布 - 卡片 + 图表 -->
    <el-row :gutter="20">
      <el-col :span="10">
        <el-card shadow="hover" class="stat-card" style="padding: 20px;">
          <div slot="header">
            <span>设备健康等级分布</span>
          </div>
          <div class="chart-box">
            <!-- 环形图：正常/停运/故障 -->
            <div id="healthPie" style="width: 100%; height: 280px;"></div>
          </div>
          <div class="stat-desc">
            正常: {{ healthStats.normal }} 台 | 停运: {{ healthStats.stop }} 台 | 故障: {{ healthStats.fault }} 台
          </div>
        </el-card>
      </el-col>

      <!-- 高风险设备清单 -->
      <el-col :span="14">
        <el-card shadow="hover" class="stat-card" style="padding: 20px;">
          <div slot="header">
            <span>高风险设备</span>
            <el-input
                v-model="searchId"
                placeholder="输入设备ID查询"
                style="width: 200px; margin-right: 10px;"
            />
            <el-button type="primary" size="mini" @click="fetchRiskDeviceList">查询</el-button>
            <el-button type="primary" size="mini" @click="refreshRiskList">刷新</el-button>
          </div>
          <el-table
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px;"
              height="400"
          >
            <el-table-column prop="deviceId" label="设备ID" width="100"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
            <el-table-column prop="deviceCode" label="设备编码" width="120"></el-table-column>
            <el-table-column prop="riskLevel" label="风险等级" width="100"></el-table-column>
            <el-table-column prop="riskFactor" label="风险因子" min-width="200"></el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              style="margin-top: 20px; text-align: right;"
          >
          </el-pagination>
          <!-- 设备详细信息弹窗 -->
          <el-dialog title="设备详细信息" :visible.sync="dialogVisible" width="60%">
            <el-table :data="selectedDeviceDetail">
              <el-table-column
                  label="字段"
                  prop="field"
                  min-width="150"
              />
              <el-table-column
                  label="值"
                  prop="value"
                  min-width="250"
              />
            </el-table>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<style scoped>
.health-analysis-container {
  padding: 30px;
}
.stat-card {
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.chart-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.stat-desc {
  text-align: center;
  margin-top: 20px;
  color: #666;
}

/* 隐藏 el-page-header 的返回箭头 */
.el-page-header__left {
  display: none !important;
}
</style>